import searchView from '../views/search.art'
import listsView from '../views/lists.art'
import notfoundView from '../views/notfound.art'
import searchModel from '../models/search'
import searchHistory from '../views/search-history.art'
import cinemasResult from '../views/cinemas-result.art'
import moviesResultView from '../views/moreMovies.art'
import moreCinemasView from '../views/moreCinemas.art'

class Search {
    constructor(){
        this.list = []
        this.cinemas = []
        this.total = 0
        this.cinematotal = 0
        this.movieslist = []
        this.cinemaslist = []
        this.offset = 1
    }
    renderer({cinemas,cinematotal,list,total}){  //关于图片的转换
        this.arr = []
        this.total =[total]
        for(let i=0;i<list.length;i++){
            this.arr.push(list[i].img.replace('w.h','128.180'));
        }
        let listsViewHtml = listsView({
            list,
            total:this.total,
            arr:this.arr
        })
        $('ul .list').html(listsViewHtml)
        let cinemasResultHtml = cinemasResult({
            cinemas,
            cinematotal
        })
        $('ul .cinemas-result').html(cinemasResultHtml)
    }
    renderMovies(movieslist){
        this.arr = []
        for(let i=0;i<movieslist.length;i++){
            this.arr.push(movieslist[i].img.replace('w.h','128.180'));
        }
        let moviesResultHtml = moviesResultView({
            arr :this.arr,
            list : movieslist
        })
        $('ul').html(moviesResultHtml)
    }
    moreMovies(){
        let that = this
        $('.list footer').on('tap',async function(){
            let result = await searchModel.getmovie({
                keyword : $('input').val(),
                offset : 1
            })
            let movieslist = that.movieslist = result.movies
            movieslist.unshift(that.list[0])
            that.renderMovies(movieslist)
            $('ul').scrollTop(0)
            $('.search').css('display','none')
            $('.left').off()
            $('.left').on('tap',function(){
                that.render()
            })
            $('ul').scroll(async function(){
                if($('ul').height()+$('ul').scrollTop()==$('.movies-result').height()){
                    that.offset +=20
                    let result = await searchModel.getmovie({
                        keyword : $('input').val(),
                        offset : that.offset
                    })
                    let movieslist = this.movieslist = result.movies
                    that.movieslist =[...that.movieslist,...movieslist]
                    that.renderMovies(that.movieslist)
                }
            })
        })
    }

    renderCinemas(cinemaslist){
        let moreCinemasHtml = moreCinemasView({
            cinemas : cinemaslist
        })
        $('ul').html(moreCinemasHtml)
    }

    moreCinemas(){
        let that = this
        $('.cinemas-result .more').on('tap',async function(){
            let result = await searchModel.getcinema({
                keyword : $('input').val(),
                offset : 1
            })
            let cinemaslist = this.cinemaslist =result.cinemas
            cinemaslist.unshift(that.cinemas[0])
            that.renderCinemas(cinemaslist)
            $('ul').scrollTop(0)
            $('.search').css('display','none')
            $('.left').off()
            $('.left').on('tap',function(){
                that.render()
            })
            $('ul').scroll(async function(){
                if($('ul').height()+$('ul').scrollTop()==$('.cinemas-result').height()){
                    that.offset +=20
                    let result = await searchModel.getcinema({
                        keyword : $('input').val(),
                        offset : that.offset
                    })
                    let cinemaslist = this.cinemaslist = result.cinemas
                    that.cinemaslist =[...that.cinemaslist,...cinemaslist]
                    that.renderCinemas(that.cinemaslist)
                }
            })
        })
    }

    render(){

        let that = this
        let searchViewHtml = searchView()
        $('#root').html(searchViewHtml)
        if(localStorage.getItem('searchHistory')){ 
            let searchHistoryHtml = searchHistory({
                searchHistory:JSON.parse(localStorage.getItem('searchHistory'))
            })
            $('ul .list').html(searchHistoryHtml)
        }
        $('.history-word').on('tap',async function(){
            $('input').val(this.innerHTML)
            $('.cancel1').css('display','inline-block')
            let result = await searchModel.get({
                kw: $('input').val(),
                cityId : localStorage.getItem('cityId') ||('1')
            })                
            if(result.movies||result.cinemas){
                $('ul .noresult').css('display','none')
                if(!result.movies){
                    $('ul .list').css('display','none')
                    that.list = []
                    that.total = 0
                }else{
                    $('ul .list').css('display','block')
                    that.list = result.movies.list
                    that.total =result.movies.total
                }
                if(!result.cinemas){
                    $('ul .cinemas-result').css('display','none')
                    that.cinemas = []
                    that.cinematotal = 0
                }else{
                    $('ul .cinemas-result').css('display','block')
                    that.cinemas =result.cinemas.list
                    that.cinematotal =result.cinemas.total                                        
                }
                that.renderer({
                    cinemas:that.cinemas,
                    cinematotal:that.cinematotal,
                    list:that.list,
                    total:that.total
                });
            }else{
                $('ul .noresult').css('display','block')
                $('ul .list').css('display','none')
                $('ul .cinemas-result').css('display','none')
                let notfoundHtml = notfoundView()
                $('ul .noresult').html(notfoundHtml)
            }
            that.moreMovies()
            that.moreCinemas()
        })

        $('.del-word').on('tap',function(){
            this.parentNode.style.display = 'none';
            let searchHistory = JSON.parse(localStorage.getItem('searchHistory'))
            let htmlWord = this.parentNode.children[1].innerHTML
            for(let i in searchHistory){
                if(htmlWord==searchHistory[i]){
                    searchHistory.splice(i,1)
                    localStorage.setItem('searchHistory',JSON.stringify(searchHistory))
                }
            }
        })

        let timer=null;
        $('input').on('input', function(){
            if($('input').val()==''){
                clearTimeout(timer)
                $('ul .list').html('');
                $('ul .cinemas-result').html('');
            }else{
                clearTimeout(timer)
                $('.cancel1').css('display','inline-block')
                timer=setTimeout(async function(){
                    let result = await searchModel.get({
                        kw: $('input').val(),
                        cityId : localStorage.getItem('cityId') ||('1')
                    })                
                    if(result.movies||result.cinemas){
                        $('ul .noresult').css('display','none')
                        if(!result.movies){
                            $('ul .list').css('display','none')
                            that.list = []
                            that.total = 0
                        }else{
                            $('ul .list').css('display','block')
                            that.list = result.movies.list
                            that.total =result.movies.total
                        }
                        if(!result.cinemas){
                            $('ul .cinemas-result').css('display','none')
                            that.cinemas = []
                            that.cinematotal = 0
                        }else{
                            $('ul .cinemas-result').css('display','block')
                            that.cinemas =result.cinemas.list
                            that.cinematotal =result.cinemas.total                                        
                        }
                        that.renderer({
                            cinemas:that.cinemas,
                            cinematotal:that.cinematotal,
                            list:that.list,
                            total:that.total
                        });
                    }else{
                        $('ul .noresult').css('display','block')
                        $('ul .list').css('display','none')
                        $('ul .cinemas-result').css('display','none')
                        let notfoundHtml = notfoundView()
                        $('ul .noresult').html(notfoundHtml)
                    }
                    that.moreMovies()
                    that.moreCinemas()
                },300) 
            }
        })
        $('.cancel1').on('click',function(){
            that.render()
        })
        $('.left').on('tap',function(){
            if($('input').val()){
                let searchHistory = []
                if(localStorage.getItem('searchHistory')){
                    searchHistory = JSON.parse(localStorage.getItem('searchHistory'))
                }
                let isnew = true
                if(searchHistory.length!=0){
                    for(let i in searchHistory){
                        if($('input').val()==searchHistory[i]){
                            isnew = false
                            break
                        }
                    }
                    if(isnew){
                        searchHistory.unshift($('input').val())
                    }
                    }
                else{
                    searchHistory.unshift($('input').val())
                }
                if(searchHistory.length > 3){
                    searchHistory=searchHistory.slice(0,3)
                }
                localStorage.setItem('searchHistory',JSON.stringify(searchHistory))
            }
            window.history.back()
        })
        $('.cancel2').on('tap',function(){
            if($('input').val()){
                let searchHistory = []
                if(localStorage.getItem('searchHistory')){
                    searchHistory = JSON.parse(localStorage.getItem('searchHistory'))
                }
                let isnew = true
                if(searchHistory.length!=0){
                    for(let i in searchHistory){
                        if($('input').val()==searchHistory[i]){
                            isnew = false
                            break
                        }
                    }
                    if(isnew){
                        searchHistory.unshift($('input').val())
                    }
                    }
                else{
                    searchHistory.unshift($('input').val())
                }
                if(searchHistory.length > 3){
                    searchHistory=searchHistory.slice(0,3)
                }
                localStorage.setItem('searchHistory',JSON.stringify(searchHistory))
            }
            window.history.back()
        })    
        
    }
}
export default new Search()